<template>
  <div class="dropdown-opts-main" :class="{'flex' : activeItem }">
    <checker class="dropdown-opts-list" v-model="optionsListObjectVal" default-item-class="opts-item" selected-item-class="opts-item-selected">
      <div>
        <checker-item v-for="(checkeritem, index) in optionsListObject.options" :value="checkeritem.value" :key="checkeritem.value" >
          <i class="opts-ico"></i>
          <span class="opts-text">{{ checkeritem.text }}</span>
        </checker-item>
      </div>
    </checker>

    <checker v-if="activeItem" class="dropdown-opts-list bdl" v-model="activeItemValue" default-item-class="opts-item" selected-item-class="opts-item-selected">
      <checker-item  v-for="(option, oindex) in activeItem.options"  :value="option.value"  :key="oindex">
        <i class="opts-ico"></i>
        <span class="opts-text">{{ option.text }}</span>
      </checker-item>
    </checker>
  </div>
</template>
<script>
  import {Checker, CheckerItem } from 'vux'
  import {
    HIDE_COVER
  } from '../store/mutation-types';


  export default {
    props:{
    optionsListObject :{
      type : Object,
      required : true
    },
    }
     ,
    data () {
      this.activeItem = "";

      return {
      demo2: '1',
        activeItem: '',
        activeItemValue: '',
        oactiveItemValue: '',
        optionsListObjectVal: ''
      }
    },

    components: {
      Checker,
      CheckerItem
    },

    mounted() {

    },

    methods: {
      caculate(reload){
        let that = this;

        if(true === reload) {
          this.activeItem = '';
          this.optionsListObjectVal = this.optionsListObject.checked;
        } else {
          this.optionsListObject.checked = that.optionsListObjectVal;
          console.log('selected ', that.optionsListObjectVal)
        }

        this.optionsListObject.options.forEach(function(object, b) {

          if(typeof object.options != 'undefined' && that.optionsListObjectVal == object.value) {
            that.activeItem = object;
            that.optionsListObject['activeItem'] = object;
            that.activeItemValue = object.checked;

            object.options.forEach(function(item, b) {

              if(that.activeItemValue === item.value) {
                that.activeItemValue = item.value;
                object.options[b].checked = that.activeItemValue;
              }
            });
          }
        });

        if(typeof this.optionsListObject.options == 'undefined') {
        return this.$store.commit(HIDE_COVER);
        }
      }
    },

    watch: {

      activeItemValue(value){
        this.activeItem.checked = value;
        this.$emit('change-filter', this.optionsListObject);
      },

      optionsListObjectVal(value){
        this.caculate(false);
        this.$emit('change-filter', this.optionsListObject);
      },

      optionsListObject () {
        this.caculate(true);
      },

    },

    computed:{

    }

  };
</script>
<style lang="less">
  @import '../less/index.less';

  .top-filter-bar{

    .opts-item {
    &:extend(.clearfix all);

    padding: 10px;
    display: block;
    padding-left: 15px;
    border-bottom: 1px solid #ededed;

    &>*{
      float: left;
    }
    }

    .opts-text{
    padding-left: 12px;
    font-size: 14px;
    line-height: 20px;
    }

    .opts-ico{
      width: @top-filter-opts-ico-size;
      height: @top-filter-opts-ico-size;
      border-radius: @top-filter-opts-ico-size;
      border:1px solid #ededed;
    }

    .vux-tap-active:active{
    background-color: white;
    color: #20a0ff;

    .opts-ico{
      background-color: #20a0ff;
    }
    }

    .opts-item-selected {
    background-color: white;
    color: #20a0ff;

    .opts-ico{
      background-color: #20a0ff;
      border:1px solid #20a0ff;
    }
    }

    .dropdown-opts-main.flex {

    display: flex;

    .dropdown-opts-list {
      flex: 1;
    }

    .bdl{
      border-left: 1px solid #EDEDED;
    }
    }
  }
</style>
